Description

The modified toolbar.css ends without a trailing newline, violating the repository’s EditorConfig
and potentially failing formatting/lint checks in CI.

Code

src/static/skins/colibris/src/components/toolbar.css[R165-168]

}
.mobile-layout .toolbar ul li a:hover {
  /* background-color: transparent; */
-}
+}

Evidence

The repository requires a final newline for all files via EditorConfig, but this PR’s diff indicates
the CSS file now lacks it at EOF.

.editorconfig[1-9]
src/static/skins/colibris/src/components/toolbar.css[166-168]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`src/static/skins/colibris/src/components/toolbar.css` is missing the final newline at EOF, which violates `.editorconfig` (`insert_final_newline = true`) and may trigger formatting/lint failures.

## Issue Context
The PR diff explicitly shows `\ No newline at end of file`.

## Fix Focus Areas
- src/static/skins/colibris/src/components/toolbar.css[165-168]
- .editorconfig[1-9]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

Setting flex-wrap: wrap on .toolbar ul can eliminate horizontal overflow, changing
menuLeft.scrollWidth and preventing pad_editbar.ts from adding body.mobile-layout and/or
.toolbar.cropped in cases where the UI previously relied on those states to handle overflow.

Code

src/static/skins/colibris/src/components/toolbar.css[R17-20]

+  display: flex;
  align-items: center;
+  flex-wrap: wrap; /* Fixes layout crunching by allowing items to scale elegantly */
}

Evidence

The PR introduces wrapping on .toolbar ul, while the runtime logic that decides overflow handling
relies on menuLeft.scrollWidth thresholds; wrapping can make scrollWidth appear non-overflowing
even when the buttons no longer fit on a single line.

src/static/skins/colibris/src/components/toolbar.css[16-20]
src/static/js/pad_editbar.ts[370-386]
src/static/skins/colibris/src/components/toolbar.css[118-121]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`pad_editbar.ts` decides whether to enable `body.mobile-layout` and `.toolbar.cropped` using `menuLeft.scrollWidth` comparisons. The PR adds `flex-wrap: wrap` to `.toolbar ul`, which can remove horizontal overflow by wrapping items to new lines, making `scrollWidth` no longer reflect “icons don’t fit on one row”. This can prevent `mobile-layout`/`cropped` from activating on some viewport/plugin combinations.

## Issue Context
`checkAllIconsAreDisplayedInToolbar()` explicitly removes `mobile-layout` before measuring, so the measurement happens under the base `.toolbar ul` rules (where `flex-wrap: wrap` now applies).

## Fix Focus Areas
- src/static/skins/colibris/src/components/toolbar.css[16-20]
- src/static/js/pad_editbar.ts[370-386]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

• Switch toolbar `` layout to flex to prevent mobile item crunching.
• Enable horizontal swipe scrolling on mobile while hiding scrollbars.
• Improve mobile tap targets and prevent icon shrinking for consistent alignment.

The following are alternative approaches to this PR:

Recommendation: Current approach (flex + overflow-x auto + momentum scrolling) is the lowest-risk, most native-feeling fix for #7756 and keeps behavior purely CSS-driven. Consider scroll-snap only if usability testing shows users miss off-screen tools.

toolbar.css Enable mobile flex toolbar with horizontal overflow scrolling +16/-2

Enable mobile flex toolbar with horizontal overflow scrolling

• Converts the toolbar '<ul>' to a flex container and adds mobile-only horizontal overflow scrolling with momentum ('-webkit-overflow-scrolling: touch') while hiding scrollbars. Adjusts mobile list-item spacing and prevents flex shrink to keep tap targets usable and icons aligned. File also ends without a trailing newline.

src/static/skins/colibris/src/components/toolbar.css

---